<template>
    <div>
        <nh-search-form
                :data="jsondata"
                :value="editdata" ref="GenerateForm">

            <template slot="search-button" slot-scope="scope">
                <div style="text-align: right;">
                    <el-button class="search-form-btn" size="small" type="primary" @click="searchData()">检索</el-button>
                    <el-button size="small" plain @click="resetParam()">重置</el-button>
                </div>
            </template>

            <template slot="safety" slot-scope="scope">
                <!-- v-model="scope.model.safety"-->
                 <dictionary-select-option
                        ref="optionOne1"
                        :widget="scope"
                        @searchOptionData="searchDictionary('SAFETY_TYPE',1,'optionOne1')"
                ></dictionary-select-option>
            </template>
            <template slot="nation" slot-scope="scope">
                <dictionary-select-option
                        ref="optionNation"
                        :widget="scope"
                        @searchOptionData="searchDictionary('NATION',2,'optionNation')"
                ></dictionary-select-option>
            </template>
            <template slot="cusTree" slot-scope="scope">
                <p v-width="300">
                    <TreePicker ref="treepicker" :option="param" multiple :showCount="showCount" filterable v-model="value" @change="change" @choose="choose" @select="select"></TreePicker>
                </p>
            </template>

        </nh-search-form>
    </div>
</template>

<script>
    import {dictionaryByType} from '../../api/dictionary';
    import GenerateFormItem from "../../../packages/NhSearchForm/src/GenerateFormItem";
    import DictionarySelectOption from "../../../packages/From/DictionarySelectOption";


    export default {
        name: 'formTemple',
        components: {DictionarySelectOption, GenerateFormItem},
        data() {
            let list = [
                { id: 1, title: '一级' },
                { id: 2, title: '二级' },
                { id: 3, title: '三级', disabled: true },
                { id: 10, title: '一级-0', parent: 1 },
                { id: 11, title: '一级-1', parent: 1 },
                { id: 12, title: '一级-2', parent: 1 },
                { id: 13, title: '一级-3', parent: 1 },
                { id: 14, title: '一级-4', parent: 1 },
                { id: 20, title: '二级-0', parent: 2 },
                { id: 21, title: '二级-1', parent: 2 },
                { id: 22, title: '二级-2', parent: 2 },
                { id: 23, title: '二级-3', parent: 2 },
                { id: 24, title: '二级-4', parent: 2 },
                { id: 30, title: '三级-0', parent: 3 },
                { id: 31, title: '三级-1', parent: 3 },
                { id: 32, title: '三级-2', parent: 3 },
                { id: 33, title: '三级-3', parent: 3 },
                { id: 34, title: '三级-4', parent: 3 }
            ];
            return {
                value: null,
                showCount: false,
                param: {
                    keyName: 'id',
                    parentName: 'parent',
                    titleName: 'title',
                    dataMode: 'list',
                    datas: list
                },
                jsondata:
                    {
                        "config": {
                            "customClass": "s-lay-out-table-form",
                            "labelPosition": "right",
                            "labelWidth": 100,
                            "size": "small"
                        },
                        "list": [
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "columns": [
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "model": "time1",
                                                "name": "时间区间",
                                                "options": {
                                                    "clearable": true, //是否存在清除按钮
                                                    "customClass": "",
                                                    "defaultValue": "08:00",//默认值
                                                    "disabled": false, //是否禁用，输入框颜色变灰色
                                                    "editable": true, //是否可以编辑  true|是 false|否
                                                    "readonly": false,//是否只读，输入框颜色不变
                                                    "format": "HH:mm:ss",
                                                    "valueFormat":"yyyy-MM-dd",
                                                    "placeholder": "选择时间",
                                                    "style": {"width":"100%"},
                                                    "pickerOptions":"{start: '08:30'," +
                                                        "step: '00:15'," +
                                                        "end: '18:30'}",
                                                },
                                                "type": "timeselect"
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    }
                                ],
                                "model": "grid-row-3",
                                "options": {
                                    "align": "top",
                                    "customClass": "",
                                    "gutter": 0,
                                    "justify": "start",
                                },
                            },
                            {
                                "columns": [
                                    {
                                        "list": [
                                            {
                                                "model": "timeS",
                                                "name": "时间1",
                                                "options": {
                                                    "arrowControl": true,
                                                    "clearable": true,
                                                    "customClass": "",
                                                    // "defaultValue":   '10:00:00',
                                                    "disabled": false,
                                                    "editable": true,
                                                    "readonly": false,
                                                    "format": "HH:mm:ss",//HH:mm:ss
                                                    "valueFormat":"yyyy-MM-dd",
                                                    "isRange": false,
                                                    "placeholder": "选择时间",
                                                    "startPlaceholder": "开始时间",
                                                    "endPlaceholder": "结束时间",
                                                    "style": {"width":"100%"},
                                                    "pickerOptions":"{selectableRange: '18:30:00 - 20:30:00'}",
                                                },
                                                "type": "time"
                                            }
                                        ],
                                        "span": 6
                                    },
                                    {
                                        "span": 8,
                                        "list": [
                                            {
                                                "model": "time2",
                                                "name": "时间2",
                                                "options": {
                                                    "arrowControl": true,
                                                    "clearable": true,
                                                    "customClass": "",
                                                    "defaultValue":   ['2009-10-10 10:00:00', '2009-10-10 13:00:00'],
                                                    "disabled": false,
                                                    "editable": true,
                                                    "readonly": false,
                                                    "format": "HH:mm:ss",//HH:mm:ss
                                                    "valueFormat":"yyyy-MM-dd",
                                                    "isRange": true,
                                                    "placeholder": "1",
                                                    "startPlaceholder": "开始时间",
                                                    "endPlaceholder": "结束时间",
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "time"
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "model": "time3",
                                                "name": "时间3",
                                                "options": {
                                                    "arrowControl": false,
                                                    "clearable": true,
                                                    "customClass": "",
                                                    // "defaultValue":  '10:00:59',
                                                    "disabled": false,
                                                    "editable": true,
                                                    "readonly": false,
                                                    "format": "HH:mm:ss",//HH:mm:ss
                                                    "valueFormat":"yyyy-MM-dd",
                                                    "isRange": false, //s
                                                    "placeholder": "选择时间",
                                                    "startPlaceholder": "开始时间",
                                                    "endPlaceholder": "结束时间",
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "time"
                                            }
                                        ]
                                    },

                                ],
                                "model": "grid-row-2",
                                "name": "栅格布局",
                                "options": {
                                    "align": "top",
                                    "customClass": "",
                                    "gutter": 0,
                                    "justify": "start",
                                },
                                "type": "grid"
                            },
                            {
                                "columns": [
                                    {
                                        "span": 8,
                                        "list": [{
                                            "type": "date",
                                            "name": "日期2",
                                            "options": {
                                                "defaultValue":  ['2009-10-10', '2009-10-13'],
                                                "readonly": false,
                                                "disabled": false,
                                                "editable": true,
                                                "clearable": true,
                                                "placeholder": "",
                                                "startPlaceholder": "",
                                                "endPlaceholder": "",
                                                "type": "daterange",  //  date  daterange
                                                "format": "yyyy-MM-dd",
                                                "valueFormat":"yyyy-MM-dd",
                                                "timestamp": false,
                                                "style": {"width":"100%"},
                                                "customClass": "",
                                            },
                                            "model": "date1",
                                        }]
                                    },
                                    {
                                        "span": 6,
                                        "list": [{
                                            "type": "date",
                                            "name": "日期1",
                                            "options": {
                                                "defaultValue": "2019-08-23",
                                                "readonly": false,
                                                "disabled": false,
                                                "editable": true,
                                                "clearable": true,
                                                "placeholder": "",
                                                "startPlaceholder": "",
                                                "endPlaceholder": "",
                                                "type": "date",
                                                "format": "yyyy-MM-dd",
                                                "valueFormat":"yyyy-MM-dd",
                                                "timestamp": false,
                                                "style": {"width":"100%"},
                                                "customClass": "",
                                            },
                                            "model": "date22",
                                        }]
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    }
                                ],
                                "model": "grid-row-1",
                                "name": "栅格布局",
                                "options": {
                                    "align": "top",
                                    "customClass": "",
                                    "gutter": 0,
                                    "justify": "start",
                                },
                                "type": "grid"
                            },
                            {
                                "columns": [
                                    {
                                        "span": 8,
                                        "list": [{
                                            "type": "datetime",
                                            "name": "时间选择器1",
                                            "options": {
                                                "defaultValue":  ['2009-10-10 10:00:00', '2009-10-10 13:00:00'],//也支持date
                                                //defaultTime
                                                "defaultStartTime": "00:00:00",
                                                "defaultEndTime": "23:59:59",
                                                "readonly": false,
                                                "disabled": false,
                                                "editable": true,
                                                "clearable": true,
                                                "placeholder": "选择时间",
                                                "startPlaceholder": "开始时间",
                                                "endPlaceholder": "结束时间",
                                                "type": "datetimerange",
                                                "rangeSeparator": "至",
                                                "format": "yyyy-MM-dd HH:mm:ss", //yyyy-MM-dd 显示的格式，有效
                                                "valueFormat":"yyyy-MM-dd HH:mm:ss",
                                                "timestamp": false, //时间戳  false | 使用format的时间格式 true|使用时间戳
                                                "style": {"width":"100%"},
                                                "customClass": "",//
                                            },
                                            "model": "datetime1",
                                        }]
                                    },
                                    {
                                        "span": 6,
                                        "list": [{
                                            "type": "datetime",
                                            "name": "时间选择器2",
                                            "options": {
                                                "defaultValue":  '2009-10-10 10:00:00',//也支持date
                                                //defaultTime
                                                "defaultStartTime": "",
                                                "defaultEndTime": "",
                                                "readonly": false,
                                                "disabled": false,
                                                "editable": true,
                                                "clearable": true,
                                                "placeholder": "选择时间",
                                                "startPlaceholder": "开始时间",
                                                "endPlaceholder": "结束时间",
                                                "type": "datetime",
                                                "rangeSeparator": "",
                                                "format": "yyyy-MM-dd HH:mm:ss", //yyyy-MM-dd 显示的格式，有效
                                                "valueFormat":"yyyy-MM-dd HH:mm:ss",
                                                "timestamp": false, //时间戳  false | 使用format的时间格式 true|使用时间戳
                                                "style": {"width":"100%"},
                                                "customClass": "",//
                                            },
                                            "model": "datetime12",
                                        }]
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    }
                                ],
                                "model": "grid-row1",
                                "name": "栅格布局",
                                "options": {
                                    "align": "top",
                                    "customClass": "",
                                    "gutter": 0,
                                    "justify": "start",
                                },
                                "type": "grid"
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "columns": [
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "model": "sex",
                                                "name": "性别",
                                                "options": {
                                                    "customClass": "",  //自定义的class
                                                    "defaultValue": "", //默认值
                                                    "inline": true,  //false| inline-block true| block
                                                    "disabled": false, //true| 禁用  false| 启用
                                                    "showLabel": true, //true| 显示label  false| 显示value
                                                    "style": {"width":"100%"},
                                                    "options": [
                                                        {
                                                            "label": "男性",
                                                            "value": "1"
                                                        },
                                                        {
                                                            "label": "女性",
                                                            "value": "2"
                                                        }
                                                    ],
                                                },
                                                "type": "radio"
                                            }
                                        ],
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "checkbox",
                                                "name": "多选框组",
                                                "model": "xx",
                                                "options": {
                                                    "inline": true, //
                                                    "defaultValue": [],
                                                    "showLabel": false,
                                                    "options": [
                                                        {
                                                            "value": "选项1"
                                                        },
                                                        {
                                                            "value": "选项2"
                                                        }
                                                    ],
                                                    "customClass": "",
                                                    "style": {"width":"100%"},
                                                },
                                            }]
                                    },


                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "customClass": "",
                                },
                                "model": "grid_1566449461000_70851",
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "columns": [
                                    {
                                        "list": [
                                            {
                                                "model": "name",
                                                "name": "小区名称",
                                                "options": {
                                                    "customClass": "cus-input",
                                                    "datatype": "string",
                                                    "defaultValue": "开心小区",
                                                    "disabled": false,
                                                    "pattern": "",
                                                    "placeholder": "请输入小区名称",
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "input"
                                            }
                                        ],
                                        "span": 6
                                    },
                                    {
                                        "list": [
                                            {
                                                "model": "address",
                                                "name": "小区地址",
                                                "options": {
                                                    "customClass": "",//自定义class
                                                    "dataType": "string",//input 的type
                                                    "defaultValue": "", //默认值
                                                    "disabled": false,//禁用
                                                    "clearable": false,//隐藏清空按钮
                                                    "showPassword": false,// 可切换显示隐藏的密码框
                                                    "suffixIcon":"el-icon-date", //输入框后部的图标
                                                    "prefixIcon":"el-icon-search", //输入框前部的图标
                                                    "pattern": "<button>ccc</button>",
                                                    "placeholder": "",
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "input"
                                            }
                                        ],
                                        "span": 6
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "number",
                                                "name": "计数器",
                                                "options": {
                                                    "style": {"width":"100%"},
                                                    "defaultValue": 0,
                                                    "min": 0,
                                                    "max": 0,
                                                    "step": 1,
                                                    "disabled": false,
                                                    "controlsPosition": "",
                                                    "customClass": "",
                                                },
                                                "model": "number",
                                            }
                                        ]
                                    },
                                    {
                                        "list": [
                                            {
                                                "type": "textarea",
                                                "name": "文本域",
                                                "options": {
                                                    "style": {"width":"100%"},
                                                    "defaultValue": "",
                                                    "disabled": false,
                                                    "pattern": "",
                                                    "placeholder": "请输入备注",
                                                    "rows":1,
                                                    "type": "textarea",
                                                    "autosize":{ minRows: 2, maxRows: 4}
                                                },
                                                "model": "remarks"
                                            }
                                        ],
                                        "span": 6
                                    },
                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "customClass": "",
                                },
                                "model": "grid_1566449461000_70851",
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "model": "grid_1566449461000_vvvv",
                                "columns": [
                                    {
                                        "list": [
                                            {
                                                "model": "threshold",
                                                "name": "阈值",
                                                "options": {
                                                    "customClass": "",  //自定义class
                                                    "defaultValue": 2, //默认值
                                                    "disabled": false, //是否禁用
                                                    "step": 1,  //步长
                                                    "max": 10, //最大值
                                                    "min": 0,  //最小值
                                                    "range": false,        //是否开启范围选择
                                                    "showStops": false,    //是否显示离散的点
                                                    "showInput": false, //是否显示输入框
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "slider"
                                            }
                                        ],
                                        "span": 6
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "rate",
                                                "name": "评分",
                                                "options": {
                                                    "defaultValue": 0,
                                                    "max": 5,
                                                    "disabled": false,
                                                    "allowHalf": false,
                                                    "customClass": "",
                                                },
                                                "model": "rate",
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "color",
                                                "name": "颜色选择器",
                                                "options": {
                                                    "defaultValue": "",
                                                    "disabled": false,
                                                    "showAlpha": false,
                                                    "required": false,
                                                    "customClass": "",
                                                },
                                                "model": "color",
                                            }
                                        ]
                                    },
                                    {
                                        "list": [
                                            {
                                                "model": "areaTag",
                                                "name": "小区标签",
                                                "options": {
                                                    "clearable": false,
                                                    "customClass": "",
                                                    "defaultValue": "",
                                                    "disabled": false,
                                                    "filterable": false,
                                                    "multiple": false, //
                                                    "options": [
                                                        {
                                                            "value": "安全"
                                                        },
                                                        {
                                                            "value": "危险"
                                                        }
                                                    ],
                                                    "placeholder": "请选择小区标签",
                                                    "props": {
                                                        "label": "label",
                                                        "value": "value"
                                                    },
                                                    "showLabel": false,
                                                    "style": {"width":"100%"},
                                                },
                                                "type": "select"
                                            }
                                        ],
                                        "span": 6
                                    },


                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "customClass": "",
                                },
                            },
                            {
                                "type": "grid",
                                "name": "栅格布局",
                                "columns": [
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "blank",
                                                "name": "自定义",
                                                "icon": "icon-ic",
                                                "options": {
                                                    "defaultType": "String",
                                                    "customClass": "",
                                                    "style": {"width":"100%"},
                                                },
                                                "model": "cusTree",
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    },
                                    {
                                        "span": 6,
                                        "list": []
                                    }
                                ],
                                "options": {
                                    "gutter": 0,
                                    "justify": "start",
                                    "align": "top",
                                    "customClass": "",
                                },
                                "model": "grid_1566816838074",
                            },
                            {
                                "columns": [
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                //自定义下拉框，回调获取数据
                                                "type": "blank",  //自定义类型
                                                "name": "安防分类",  //form label的名称
                                                "model": "safety", //表单绑定值的字段名称，也是插槽的名称
                                                "options": {
                                                    "clearable": false, //是否清楚
                                                    "customClass": "", //自定义类
                                                    "defaultValue": "", //默认值
                                                    "disabled": false, //是否禁用
                                                    "filterable": false, //是否搜索
                                                    "multiple": true, //是否多选
                                                    "collapseTags": true, //是否合并显示多选
                                                    "placeholder": "请选择安防分类",//
                                                    "style": {"width":"100%"},
                                                },
                                            }
                                        ]
                                    },
                                    {
                                        "span": 6,
                                        "list": [
                                            {
                                                "type": "blank",
                                                "name": "民族",
                                                "model": "nation",
                                                "options": {
                                                    "clearable": true, //是否清楚
                                                    "customClass": "", //自定义类
                                                    "defaultValue": "", //默认值
                                                    "disabled": false, //是否禁用
                                                    "filterable": false, //是否搜索
                                                    "multiple": false, //是否多选
                                                    "collapseTags": false, //是否合并显示多选
                                                    "placeholder": "请选择民族",//
                                                    "style": {"width":"100%"},
                                                },
                                            }
                                        ]
                                    },
                                    {
                                        "list": [
                                            {
                                                "type": "blanks",
                                                "model":"search-button",
                                            }],
                                        "span": 12,
                                    }
                                ],
                                "model": "gird-row2",
                                "name": "栅格布局",
                                "options": {
                                    "align": "top",
                                    "customClass": "",
                                    "gutter": 0,
                                    "justify": "start",
                                },
                                "type": "grid"
                            },
                        ]
                    },
                editdata: {},
                optionArr: [],
            }
        },
        mounted(){
        },
        methods: {
            searchData(){
                //TODO 自定义的组件手动赋值
                this.$refs.GenerateForm.models.safety = this.$refs.optionOne1.getSelectValue();
                this.$refs.GenerateForm.models.nation = this.$refs.optionNation.getSelectValue();
                console.log(this.$refs.optionOne1.getSelectValue());
                //TODO 查询条件的表单数据
                console.log(this.$refs.GenerateForm.models);
            },
            resetParam(){
                //TODO 自定义的组件手动清空
                this.$refs.optionOne1.clearSelectValue();
                this.$refs.optionNation.clearSelectValue();
                //
                this.$refs.GenerateForm.reset();
            },

        // 字典请求接口， 如果字典返回的value 要求name和value 都返回， 回调的方法会从组件中抽离出来
        //    sign : 1|code   2|code  name
            searchDictionary(type, sign,refsName){
                dictionaryByType({params: {type: type}}).then(res => {
                    const data = [];
                    for (let item of res.data.result) {
                        data.push({
                            label: item.name,
                            value: sign===1?item.code:(item.code+','+item.name),
                            id: item.id,
                            parentId: item.pid,
                        })
                    }
                    this.$refs[refsName].optionArr = data;
                });
            },
            change() {
                // 选择器关闭的时候触发
            },
            update() {
                // 1.17.0+ 支持该方式更新，其他版本请使用 updateShow
                this.value = [1];
            },
            choose(data) {
                console.log(data);
            },
            select(data) {
                console.log(data);
            }
        }

    }
</script>

<style scoped>
    /*<!--自定义的表单样式 s-lay-out-table-form -->*/
    /*<!--自定义的输入框样式 cus-input -->*/

    .s-lay-out-table-form >>> .cus-input{
        background-color: #ffffff;
        cursor: auto;
        color: #334266;
    }

    .s-lay-out-table-form {
        background-color: white;
    }

    .s-lay-out-table-form >>> .el-input__inner:hover{
        border: 1px solid rgba(51,146,255, 0.85) !important;
        box-shadow: 0 0 8px 0 rgba(51,146,255, .3);
    }

    .s-lay-out-table-form >>> label {
        font-size: 14px;
        padding-right: 16px;
    }

    .s-lay-out-table-form >>> .el-select {
        width: 100%;
    }

    .s-lay-out-table-form >>> .el-range-editor {
        width: 100%;
    }

    .s-lay-out-table-form >>> .el-button {
        width: 100px;
    }

    .s-lay-out-table-form >>> .el-input__inner {
        height: 32px;
        line-height: 32px;
    }

    .s-lay-out-table-form >>> .el-form-item__label {
        height: 32px;
        line-height: 32px;
    }

    .s-lay-out-table-form >>> .el-form-item__content {
        line-height: 32px;
    }

    .s-lay-out-table-form >>> .el-form-item {
        margin-bottom: 10px;
    }

    .s-lay-out-table-form >>> .el-date-editor .el-range-input {
        width: 41% !important;
    }

    .s-lay-out-table-form >>> .el-range__close-icon {
        width: 0 !important;
    }

    .s-lay-out-table-form >>> .el-select__caret {
        /*.s-lay-out-table-form >>> .el-input__icon{*/
        line-height: 36px;
    }

    .s-lay-out-table-form >>> .el-icon-time {
        line-height: 25px;
    }

    .s-lay-out-table-form >>> .el-date-editor .el-range-separator {
        line-height: 25px;
    }

    .s-lay-out-table-form >>> .search-form-btn {
        background-image: linear-gradient(135deg, #5FACFD 0%, #6373FA 100%);
        box-shadow: 0 6px 12px 0 rgba(0, 95, 204, .4);
        color: #fff;
        text-align: center;
        -webkit-border-radius: 4px;
    }

    .s-lay-out-table-form >>> .search-form-btn:hover {
        background-image: linear-gradient(135deg, #6373FA 100%, #5FACFD 0%);
    }

    .s-lay-out-table-form >>> .el-dropdown {
        width: 100%;
    }
</style>
